
<template>
	
	<div id="regist">
		<v-head></v-head>

		<van-form @submit="onSubmit">
			<van-cell-group>
				
				<van-cell>
					<van-field name="radio">
						<template #input>
							<van-radio-group v-model="form.radio" direction="horizontal" @change="userFixFun">
								<van-radio name="1">手机</van-radio>
								<van-radio name="2">邮箱</van-radio>
								<van-radio name="3">试用账号</van-radio>
							</van-radio-group>
						</template>
					</van-field>
				</van-cell>

				<!-- 通过 validator 进行异步函数校验 -->
				<van-cell>
					<van-field name="validator" v-model="form.userName_" :placeholder="userFix" :rules="[
						{ required: true, message: '账号不能为空' },
						{validator: asyncValidator, message: '账号已存在,请重新输入' }
						]"></van-field>
				</van-cell>

				<van-cell v-show="f_sms">
					<van-field v-model="form.sms" center clearable :rules="[{required:true,message:'验证码不能为空'}]"
					placeholder="请输入验证码">
						<template #button>
							<van-button size="small" type="primary" @click="sendSms" native-type="button" :disabled="disabled">{{ sms_msg }}</van-button>
						</template>
					</van-field>
				</van-cell>
				
				<van-cell>
					<van-field
					    v-model="form.userPassword"
					    type="password"
					    name="密码" 
					    placeholder="密码"
					    :rules="[{ required: true, message: '请填写密码' }]"></van-field>
				</van-cell>
				
				<van-cell>
					<van-field
					    v-model="form.reuserPassword"
					    type="password"
					    name="确认密码" 
					    placeholder="确认密码"
					    :rules="[{ required: true, message: '请填写确认密码' }]"></van-field>
				</van-cell>
				<van-cell>
					 
					  <van-field
					    v-model="form.remark"
					    name="邀请码" 
					    placeholder="请输入邀请码手机,邮箱,不填均可"
					   ></van-field>
				</van-cell>
				
				<van-cell>
					 <van-button round block type="info" native-type="button" @click="onSubmit">提交</van-button>
				</van-cell>
			</van-cell-group>
		</van-form>
	</div>
</template>

<script>
	import vHead from './login_regist_header'; 
	export default {
		components:{
			vHead
		},
		name: "register",
		data() {
			return {
				form:{
					userName_: "",
					sms: "",
					userPassword:"",
					reuserPassword:"",
					remark:"",
					radio: '1',
				},
				
				userFix: "请输入手机号", 
				f_sms: true,
				sms_msg:"发送验证码",
				disabled:false, 
				
			};
		},
		methods: {
			onSubmit(){
				console.log('submit',this.form);
				//验证两次密码是否一致
				if(this.form.userPassword!=this.form.reuserPassword){
					this.$toast.fail("两次密码不一致,请重新输入");
					return ;
				}
				
				return new Promise((resolve) => {
					let url = "/api/goUser/regist";
					this.$axios.post(url,this.form).then(resp=>{
						if(resp.data.state==0){
							this.$toast.fail(resp.data.msg);
						}else{
							this.$toast.success("注册成功");
							this.$router.push("login");
						}
					}).catch(function(error){
						console.log(error);
					});
				});
				
			},
			
			// 异步校验函数返回 Promise
			asyncValidator(val) {

				return new Promise((resolve) => {
					this.$toast.loading({
						  message: '加载中...',
						  forbidClick: false,
						});

					if(this.form.radio==1){ //判断是否手机号
						if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(val))){
							console.info("手机号码错误");
							this.$toast.fail(val+"手机号码不是正确格式");
							this.form.userName_="";
							return  ;
						}
					}else if(this.form.radio==2){//判断是否正确的邮箱号
						if(!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/).test(val)){
							console.info("邮箱格式错误");
							this.$toast.fail(val+"邮箱格式错误");
							this.form.userName_="";
							return  ;
						}
					}

					let url ="/api/goUser/checkUser/"+val;
					//var v_data = {userName_:this.userName_};
					//console.log("data",v_data);
					this.$axios.get(url).then((res)=>{
						this.$toast.clear();
						console.log("res",res); 
						if(res.data.state==0){
							
						}else{
							this.$toast.fail(val+"已经被其他人注册");
							this.form.userName_="";
						}
						val="恭喜可以注册";
					}).catch(function(error){
						console.log(error);
					})
				});
			},
			onFailed(errorInfo) {
				console.log('failed', errorInfo);
			},
			//用户选择注册类型
			userFixFun(name) {
				console.info(name);
				if (name == '1') {
					this.userFix = "请输入手机号,稍后验证码是手机接收";
					this.f_sms = true;
				} else if (name == "2") {
					this.userFix = "请输入邮箱,稍后验证码是邮箱接收";
					this.f_sms = true;
				} else if (name == "3") {
					this.userFix = "请输入账号名,不需要验证码";
					this.f_sms = false;
				}
			},
			//发送验证码
			sendSms(){
				console.log("===正在发送验证码===");
				this.disabled=true ;
				if(this.form.radio==1 || this.form.radio==2){ //手机注册,发送手机验证码

					this.$axios.get("/api/goUser/sendSms/"+this.form.radio+"/"+this.form.userName_).then((res)=>{
						if(res.data.state==1){
							this.$toast.success("验证码发送成功");
							let second = 60;
							const timer = setInterval(() => {
							  second--;
							  if (second) {
							    this.sms_msg = `倒计时 ${second} 秒`;

							  } else {
							    clearInterval(timer);
							    this.sms_msg="再次发送";
								  this.disabled=false ;
							  }
							}, 1000);
						}
					}).catch((e)=>{
						console.log(e);
					})
				}else{ //普通注册
					
				}
			}
			 
			
		},
	};


</script>

<style scope></style>
